<template>
    <el-card class="management-home-card" shadow="never">
        <h2 class="main-title">管理中心首页</h2>

        <!-- 用户信息与余额 -->
        <el-descriptions :column="2" border class="user-info-desc">
            <el-descriptions-item label="昵称">{{ userInfo.nickname }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{ userInfo.create_time }}</el-descriptions-item>
            <el-descriptions-item label="上次登陆">{{ userInfo.login_time }}</el-descriptions-item>
            <!-- 空白占位，让布局对齐 -->
            <el-descriptions-item label=""></el-descriptions-item>

            <el-descriptions-item label="登录用户名">
                <span class="username">{{ userInfo.mobile }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="昵称">{{ userInfo.real_name }}</el-descriptions-item>
            <el-descriptions-item label="建馆数">{{ userInfo.mu_total }}</el-descriptions-item>
            <!-- 空白占位 -->
            <el-descriptions-item label=""></el-descriptions-item>

            <el-descriptions-item label="可用余额">
                <span>{{ userInfo.user_money }}</span>
                <el-link type="primary" :underline="false" class="recharge-link" @click="goToBalance">
                    [充值余额]
                </el-link>
            </el-descriptions-item>
            <el-descriptions-item label="可用永恒币">
                <span>{{ userInfo.user_coin }}</span>
                <el-link type="primary" :underline="false" class="recharge-link" @click="goToPayInfo">
                    [充值永恒币]
                </el-link>
            </el-descriptions-item>
        </el-descriptions>

        <!-- 功能模块区域 -->
        <el-row :gutter="20" class="feature-blocks">
            <el-col :span="8">
                <div class="feature-block memorial-block">
                    <strong class="block-title">管理纪念馆</strong>
                    <div class="block-content">
                        <el-link type="primary" :underline="false">纪念馆设置</el-link> /
                        <el-link type="primary" :underline="false">文章</el-link> /
                        <el-link type="primary" :underline="false">相册</el-link>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="feature-block permission-block">
                    <strong class="block-title">纪念馆权限说明</strong>
                    <div class="block-content">
                        <el-link type="warning" :underline="false">纪念馆权限</el-link> /
                        <el-link type="warning" :underline="false">升级</el-link> /
                        <el-link type="warning" :underline="false">价格</el-link>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="feature-block coin-block">
                    <strong class="block-title">永恒币说明</strong>
                    <div class="block-content" @click="goToExchange">
                        <el-link type="success" :underline="false">永恒币的兑换与用途</el-link>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 使用帮助 -->
        <div class="help-section">
            <div class="help-header">
                <h3 class="help-title">使用帮助</h3>
                <el-link type="primary" :underline="false" @click="moreHelp">更多帮助</el-link>
            </div>
            <ul class="help-links-list">
                <li v-for="link in helpLinks" :key="link">
                    <el-link type="info" :underline="false">{{ link }}</el-link>
                </li>
            </ul>
        </div>

    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getUserInfo } from '@/api/user'
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const router = useRouter();
// Assuming Element Plus components like ElCard, ElDescriptions, ElRow, ElCol, ElLink are globally registered or imported

interface UserInfo {
    loginCount: number;
    registerTime: string;
    lastLoginTime: string;
    username: string;
    nickname: string;
    memorialCount: number;
}

interface BalanceInfo {
    availableBalance: number;
    tiantianCoin: number;
}

const userInfo = ref({});

const balanceInfo = ref<BalanceInfo>({
    availableBalance: 0,
    tiantianCoin: 0,
});

const helpLinks = ref<string[]>([
    '怎样上传相片？',
    '普通馆与升级馆的区别',
    '怎样升级纪念馆？',
    '怎样建立网上纪念馆？',
    '怎样进行网上祭奠？',
    '怎样访问今生永恒网手机版？',
    '怎样在微信里祭奠及分享？',
    '今生永恒网会永久存在吗？',
    '今生永恒网收费吗？',
    '网上墓地使用说明',
    '怎样兑换永恒币？',
    '怎样支付？',
    '忘记用户密码怎么办？',
    '找不到纪念馆怎么办？',
]);


// 方法
const emit = defineEmits<{
    (e: 'to-path', from: string): void;
}>();


const moreHelp = () => {
    console.log('跳转到更多帮助页面');
    // Add navigation logic here
    //  alert('跳转到更多帮助页面 (模拟)');
};

const goToBalance = () => {
    console.log('跳转到余额充值页面');
    // Add navigation logic here
    emit('to-path', 'purse');
};

const goToPayInfo = () => {
    console.log('跳转到支付说明页面');
    // Add navigation logic here
    emit('to-path', 'payInfo');
};


const goToExchange = () => {
    emit('to-path', 'exchange');
}
onMounted(async () => {
    userInfo.value = userStore.userInfo
})

</script>

<style scoped>
.management-home-card {
    padding: 15px 20px;
    /* 内边距 */
    border: 1px solid #e4e7ed;
    /* 模拟边框 */
    box-shadow: none;
    /* 移除默认阴影 */
    background-color: #fff;
    /* 确保背景为白色 */
}

.main-title {
    font-size: 16px;
    /* 调整标题字体大小 */
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
    /* 标题和下方内容的间距 */
    padding-bottom: 10px;
    /* 标题下的空间 */
    border-bottom: 1px solid #f2f2f2;
    /* 标题下的细线 */
}

.user-info-desc {
    margin-bottom: 25px;
    /* 用户信息和下方模块的间距 */
}

/* 自定义 el-descriptions 样式 */
:deep(.el-descriptions__label) {
    /* color: #606266; */
    width: 100px;
    /* 统一标签宽度 */
    text-align: right;
    /* 标签右对齐 */
}

:deep(.el-descriptions__content) {
    color: #606266;
    /* 默认内容颜色 */
}

:deep(.el-descriptions-item__container) {
    /* 控制单元格内上下边距 */
    padding: 6px 10px !important;
    font-size: 13px;
    /* 调整字体大小 */
}

.username {
    color: #ff6600;
    /* 橙色字体 */
    font-weight: bold;
}

.recharge-link {
    margin-left: 10px;
    /* 充值链接与金额的间距 */
    font-size: 13px;
    /* 保持字体大小一致 */
    vertical-align: baseline;
    /* 尝试对齐 */
}

.feature-blocks {
    margin-bottom: 25px;
    /* 功能块和帮助区域的间距 */
}

.feature-block {
    padding: 15px;
    border-radius: 4px;
    height: 100px;
    /* 固定高度以对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
}

.memorial-block {
    border: 1px solid #f2f6fc;
    /* 浅灰边框 */
    background-color: #f4f4f5;
    /* 浅灰色背景 */
}

.permission-block {
    border: 1px solid #fdf6ec;
    /* 淡黄边框 */
    background-color: #fdf6ec;
    /* 淡黄色背景 */
}

.coin-block {
    border: 1px solid #f0f9eb;
    /* 淡绿边框 */
    background-color: #f0f9eb;
    /* 淡绿色背景 */
}

.block-title {
    font-size: 14px;
    color: #303133;
    margin-bottom: 10px;
    /* 标题和内容的间距 */
    display: block;
    /* 让 margin-bottom 生效 */
}

.block-content {
    font-size: 13px;
}

.block-content .el-link {
    font-size: 13px;
    /* 链接字体大小 */
    margin: 0 3px;
    /* 链接和斜线间距 */
}

.permission-block .el-link {
    color: #E6A23C;
    /* 特殊指定权限说明的链接颜色 */
}

.coin-block .el-link {
    color: #67C23A;
    /* 特殊指定永恒币说明的链接颜色 */
}


.help-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f2f2f2;
    /* 帮助区域顶部分隔线 */
}

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.help-title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin: 0;
    /* 移除 h3 默认 margin */
}

.help-links-list {
    list-style: none;
    /* 移除默认列表符号 */
    padding: 0;
    margin: 0;
    column-count: 2;
    /* 分成两列 */
    column-gap: 20px;
    /* 列间距 */
}

.help-links-list li {
    margin-bottom: 8px;
    /* 行间距 */
}

.help-links-list .el-link {
    font-size: 13px;
    color: #909399;
    /* 灰色帮助链接 */
}

.help-links-list .el-link:hover {
    color: var(--el-color-primary);
    /* 鼠标悬停时变主题色 */
}
</style>